<template>
  <div>
    <el-table :data="tableData"
              show-summary
              v-loading="loading"
              style="width: 100%">
      <el-table-column align="center"
                       :label="tableTitle">
        <el-table-column prop="territory"
                         label="区域"
                         align="center">
        </el-table-column>
        <el-table-column align="center"
                         label="计划目标（W)">
          <el-table-column prop="summation"
                           label="目标业绩"
                           align="center">
          </el-table-column>
          <el-table-column prop="sinceSigning"
                           label="自签目标"
                           align="center">
          </el-table-column>
          <el-table-column prop="agreementSigned"
                           label="协签目标"
                           align="center">
          </el-table-column>
          <el-table-column prop="operation"
                           label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button type="text"
                         size="small"
                         @click.stop.prevent="openEditMonthDialog(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center"
                         label="实际完成（W)">
          <el-table-column prop="summationDone"
                           label="总业绩"
                           sortable
                           align="center">
          </el-table-column>
          <el-table-column prop="sinceDone"
                           label="自签"
                           sortable
                           align="center">
            <template slot-scope="props">
              <popover-view :territory="props.row.territory"
                            :sign-type="'自签'"
                            :plan-month="searchForm.planMonth"
                            :plan-year="searchForm.planYear">
                <a>{{ props.row.sinceDone }}</a>
              </popover-view>
            </template>
          </el-table-column>
          <el-table-column prop="agreementDone"
                           label="协签"
                           sortable
                           align="center">
            <template slot-scope="props">
              <popover-view :territory="props.row.territory"
                            :sign-type="'协签'"
                            :plan-month="searchForm.planMonth"
                            :plan-year="searchForm.planYear">
                <a>{{ props.row.agreementDone }}</a>
              </popover-view>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center"
                         label="实际率(100%)">
          <el-table-column label="目标"
                           align="center">
            <template slot-scope="props">
              <span>{{ props.row.summationPercentage + '%'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="自签"
                           align="center">
            <template slot-scope="props">
              <span>{{ props.row.sincePercentage + '%'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="协签"
                           align="center">
            <template slot-scope="props">
              <span>{{ props.row.agreementdPercentage + '%'}}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
    <edit-month-dialog :dialog-visible="dialogVisible"
                       :detail-info="detailInfo"
                       :mode="2"
                       @close-dialog="onClose"></edit-month-dialog>
  </div>
</template>

<script>
import EditMonthDialog from './month-dialog'
import PopoverView from './popover-view-completed'
export default {
  name: 'MonthTable',
  props: {
    tableData: Array,
    tableTitle: String,
    searchForm: Object,
    activeName: String,
    loading: Boolean
  },
  data() {
    return {
      dialogVisible: false,
      detailInfo: {}
    }
  },
  methods: {
    openEditMonthDialog(row) {
      this.dialogVisible = true
      this.detailInfo = row
    },
    onClose() {
      this.dialogVisible = false
    }
  },
  components: {
    EditMonthDialog,
    PopoverView
  }
}
</script>
